<script>
</script>

<template>
  <div class="Login-box">
    <div class="Login-header">十年之河</div>
    <div class="Login-content">
      <a-input v-model:value="Phone" placeholder="用户名" />

      <a-input-password
        v-model:value="Password"
        placeholder="密码"
        style="margin-top: 12px"
      />
    </div>

    <div class="Login-footer">
      <a-button @click="Login()">登录</a-button>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { defineComponent, ref } from "vue";
import { postJSON } from "../utils/request";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    const Phone = ref("");
    const Password = ref("");
    const Router = useRouter();
    const Login = () => {
      if(Phone.value == ''){
        message.error('请输入手机号')
        return
      }
      if(Password.value == ''){
        message.error('请输入密码')
        return
      }
      let dataparms = {
        Phone: Phone.value,
        Password: Password.value,
      };
      postJSON("/Login", dataparms).then((res) => {
        if (res.code == 200) {
          Router.push({
            path: "/index",
          });
        }
      });
    };
    return {
      Login,
      Phone,
      Password,
    };
  },
});
</script>

<style lang="less" scoped>
.Login-box {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置阴影 */
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  /* 设置card的背景色 */
  background: #ffffff;
  padding: 4px 20px;
  .Login-header {
    height: 70px;
    line-height: 70px;
    font-size: 24px;
    font-weight: 600;
  }
  .Login-content {
    padding: 40px;
    border-top: 1px solid #e7e5e5;
  }
  .Login-footer {
    height: 70px;
    line-height: 70px;
  }
}
</style>
